<template>
  <div class="box">
    <!-- 环形进度条 -->
    <van-circle
      v-model:current-rate="count"
      :rate="count"
      :text="`拼团进度：${count}%`"
      stroke-width="40"
      :color="gradientColor"
      size="180"
    />

    <!-- 倒计时 -->
    <van-count-down :time="time">
      <template #default="timeData">
        <span class="block">{{ timeData.hours }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.minutes }}</span>
        <span class="colon">:</span>
        <span class="block">{{ timeData.seconds }}</span>
      </template>
    </van-count-down>
  </div>

  <van-card
    :thumb="team.product.thumbs_text"
    @click-thumb="toProductInfo(team.proid)"
  >
    <template #title>
      <div class="title">{{ team.product.name }}</div>
    </template>

    <template #desc>
      <van-highlight
        :keywords="`${team.total}`"
        :source-string="`人数：${team.total} 人`"
        highlight-class="people"
      />
      拼团时间：{{ team.createtime_text }}(开始) ~
      {{ team.endtime_text }}(结束)<br />
      拼团价格：￥{{ team.product.team }}<br />
    </template>
  </van-card>

  <!-- 拼团列表 -->
  <van-list class="team">
    <div class="item" v-for="(item, key) in list" :key="key">
      <van-image
        width="50"
        height="50"
        :src="item.businfo.avatar_text"
        fit="cover"
      />
      <div class="info">
        <div class="nickname" v-if="key == 0">
          {{ item.businfo.nickname }}(发起人)
        </div>
        <div class="nickname" v-else>{{ item.businfo.nickname }}</div>
        <div class="time">拼单时间：{{ item.createtime_text }}</div>
      </div>
    </div>
  </van-list>

  <!-- 操作按钮组 -->
  <div class="actions">
    <van-button square hairline type="danger" size="large" @click="TeamJoin"
      >参与拼团</van-button
    >
    <van-button square hairline type="warning" size="large" @click="StartTeam"
      >发起拼团</van-button
    >
  </div>
</template>
<script setup>
import { getCurrentInstance, onBeforeMount } from "vue";

const { proxy } = getCurrentInstance();

const teamid = proxy.$route.query.teamid ? proxy.$route.query.teamid : 0;
let team = ref({
  product: {},
  business: {},
});
let list = ref([]);
let count = ref(0);
let time = ref(30 * 60 * 60 * 1000);
const gradientColor = {
  "0%": "#3fecff",
  "100%": "#6149f6",
};

// 倒计时

onBeforeMount(() => {
  TeamInfo();
});

const TeamInfo = async () => {
  var result = await proxy.$POST({
    url: "/teambus/info",
    params: { teamid: teamid },
  });

  if (result.code == 0) {
    proxy.$fail(result.msg);
    return false;
  }

  console.log(result);
  team.value = result.data.team;
  list.value = result.data.list;

  //拼团进度
  var num = parseFloat(list.value.length / team.value.total).toFixed(2);
  count.value = num * 100;

  //倒计时
  time.value = parseInt(team.value.endtime - team.value.createtime) * 1000;
};

//参与拼团
const TeamJoin = async ()=>{
  proxy.$cookies.set('teamid',teamid)
  proxy.$router.push({path:'/product/info',query:{'proid':team.value.proid}})
}

//发起拼团
const StartTeam = ()=>{
  proxy.$cookies.remove('relationids')
  proxy.$cookies.remove('teamid')
  proxy.$router.push('/product/index')
}
</script>

<style>
.van-circle__text {
  font-size: 20px;
}

.van-count-down {
  font-size: 20px;
}

.box {
  width: 100%;
  text-align: center;
  padding-top: 20px;
}

.item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  padding-left: 10px;
  margin-bottom: 10px;
}

.item .info {
  margin-left: 10px;
}

.item .info .nickname,
.item .info .time {
  font-size: 16px;
  font-weight: bold;
}

.actions {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}
/* 倒计时 */
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #1989fa;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #fa3319;
}
</style>


<style scoped>
:deep(.cart) {
  display: flex;
  width: 100%;
}
::v-deep .van-swipe-cell {
  width: 100%;
}

.delete-button {
  height: 100%;
}

.van-card {
  background-color: #fff;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.tag {
  margin-right: 5px;
}

.price {
  font-size: 14px;
  font-weight: bold;
}
</style>